<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { FormInstance, FormRules,ElMessage } from "element-plus";
import { login } from '@/api/index'
import { useRouter } from "vue-router"
import { userStore } from "@/store";

onMounted(()=>{
  if(userstore.status){
    router.push('/home');
  }
})

const userstore = userStore();
const router = useRouter();
interface FormType {
  username: string;
  password: string;
}
const formref = ref<FormInstance>();
const form = reactive<FormType>({
  username: "admin",
  password: "12345678",
});
const rules = reactive<FormRules>({
  username: [
    { required: true, message: "必填", trigger: "blur" },
    { min: 2, max: 15, message: "用户名2-15个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "必填", trigger: "blur" },
    { min: 8, max: 20, message: "密码8-20个字符", trigger: "blur" },
  ],
});

const loginsubmit = async function (formref: FormInstance | undefined) {
  if (!formref) return;
  await formref.validate((valid) => {
    if (valid) {
      login(form).then((res)=>{
        if(res.data.status === true){
          userstore.status = true;
          userstore.username = res.data.username
          userstore.avatar = '/avatar/'+res.data.avatar
          router.push('/home');
          ElMessage({
            'message':res.data.message,
            'icon':'check'
          })
        }else{
          ElMessage({
            'message':res.data.message,
            'icon':'close'
          })
        }
      })
    }
  });
};
</script>

<template>
  <div class="login">
    <div class="login-form">
        <div style="width: 400px;height: 50px;font-size: 30px;text-align: center;margin: 70px 0px 0px 0px;color: white;">
            后台管理系统
        </div>
        <div style="width: 250px;height: 450px;display: flex; align-items: center;justify-content: center;">
            <el-form style="width: 100%;" ref="formref" :rules="rules" :model="form" label-width="0">
                <el-form-item prop="username">
                <el-input type="text" v-model="form.username" placeholder="用户名" clearable>
                    <template #prefix>
                    <el-icon><user /></el-icon>
                    </template>
                </el-input>
                </el-form-item>
                <el-form-item prop="password">
                <el-input @keyup.enter="loginsubmit(formref)" type="password" v-model="form.password" placeholder="密码" clearable show-password>
                    <template #prefix>
                    <el-icon><hide /></el-icon>
                    </template>
                </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 100%;" type="primary"  @click="loginsubmit(formref)">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
</template>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: url("./../../assets/1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-form {
  width: 400px;
  height: 400px;
  background: url("./../../assets/1.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
}
</style>
